<ng-container *ngIf="data.skills.talents">
  <mat-card class="card" [style.width.px]="cardWidth">
    <mat-card-header>
      <mat-card-title [innerText]="'CHARACTER.CONSTELLATION' | translate"></mat-card-title>
    </mat-card-header>
    <mat-divider></mat-divider>
    <mat-card-content class="content">
      <mat-accordion multi>
        <ng-container *ngFor="let talent of data.skills.talents; index as i">
          <mat-expansion-panel
            class="mat-elevation-z0 expand"
            [ngClass]="{'expand-over': expandOverStatus[i]}"
            (afterCollapse)="onExpandStatusChanged();setExpandStatus(i, false)"
            (afterExpand)="onExpandStatusChanged();setExpandStatus(i, true)"
          >
            <mat-expansion-panel-header>
              <mat-panel-title>
                <img
                  class="skill-icon"
                  [style.background-image]="iconBGColor"
                  [src]="talent.images.icon"
                  loading="lazy"
                  appImgErrorHandle
                />
                <span [innerText]="talent.name[currentLanguage]"></span>
              </mat-panel-title>
            </mat-expansion-panel-header>
            <!-- 効果情報 -->
            <span [innerHTML]="talent.desc[currentLanguage]"></span>
            <app-extra-data
              [characterIndex]="data.id"
              [skill]="name_constellation"
              [skillIndex]="i"
              [valueIndexes]="talent.paramValidIndexes"
            >
              <br />
              <br />
            </app-extra-data>
          </mat-expansion-panel>
        </ng-container>
      </mat-accordion>
    </mat-card-content>
  </mat-card>
</ng-container>
